<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/10/24 0024
  Time: 上午 11:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/layui-v2.2.5/layui/css/layui.css" />
    <script src="/layui-v2.2.5/layui/layui.js"></script>
    <title>红包无缝滚动效果</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            font-size: 3rem;
            line-height:3.5rem;
            text-align: center;
        }

        ul {
            list-style: none;
        }

        a img {
            border: none;
        }

        a {
            color: #333333;
            text-decoration: none;
        }

        a:hover {
            color: #ff0000;
        }
        #boxpacket {
            width: 100%;
            height: 14rem;
            margin: 10px auto 0 auto;
            overflow: hidden; /*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
        }

        .jianju span{
            margin-left: 1rem;
        }
        .paihang{
            font-size: 1rem;
            background-color: #e8f9e5;
            border-radius:1rem;
            margin-top: 1rem;
        }
        .paihang td{
            font-size: 1rem;
            width: 17rem;
        }
        .paihang img{
            height: 1.5rem;
            width: 1.5rem;
            border-radius: 50%;
            margin-left: 0rem;
        }

        #memberName{
            overflow: hidden;
            display: inline-block;
            width: 3rem;
            height: 1.5rem;
        }

    </style>



</head>
<body>
<div class="jianju" style="font-size: 1.3rem" >
    <span>排名</span>
    <span>补贴</span>
    <span>推荐人数</span>
</div>
<div id="boxpacket" class="paihang">
    <table id="cont1packet">
        <c:forEach items="${redData.redList}" var="redList" varStatus="index">
            <tr >
                <td  style="width:4rem; text-align: center">
                    ${index.index+1}
                </td>
                <td >
                    <img src="${redList.heardUrl}">
                    <span id="memberName">${redList.name}</span></td>
                <td >${redList.rebateMoney/100}</td>
                <td>${redList.oneSonMember}人</td>
            </tr>

        </c:forEach>

    </table>

    <table id="cont2packet"></table>
    <table id="cont3packet"></table>
</div>
    <div style="text-align: center;font-size: 1.5rem">我已获得：<span style="color: #5FB878">${redData.member.rebateMoney/100}</span>元</div>


    <c:if test="${redData.packConfig != null}">  <%--红包配置不为空--%>
        <div style="text-align: center;font-size: 1rem">完成任务获取补贴
            <c:if test="${redData.memberSharePacket!=null}">
                <span style="color: #5FB878">${redData.memberSharePacket.money/100}</span>元
            </c:if>
        </div>
        <div class="layui-progress layui-progress-big" lay-showpercent="true">
            <%--<div class="layui-progress-bar" lay-percent="${redData.member.oneSonMember} / 50 "></div>--%>
            <div class="layui-progress-bar" lay-percent="${redData.percent}%"></div>
        </div>
    </c:if>

<!-- 底部导航 -->
<nav class="mui-bar mui-bar-tab">
    <a href="/mobileGroup/groupIndex?orgId=${orgInfo.id}&activityId=${activityInfo.id}&parentId=${member.id}&groupId=${groupId}" class="mui-tab-item ">
        <span class="mui-icon iconfont icon-youhuiquan-fill"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a href="/mobileGroup/groupGoMyInfo?orgId=${orgInfo.id}&activityId=${activityInfo.id}&parentId=${member.id}&groupId=${groupId}" class="mui-tab-item mui-active">
        <span class="mui-icon iconfont icon-user "></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>


<script >
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
    });

    var areapacket = document.getElementById('boxpacket');
    var cont1packet = document.getElementById('cont1packet');
    var cont2packet = document.getElementById('cont2packet');
    var cont3packet = document.getElementById('cont3packet');
    areapacket.scrollTop = 0;
    // 克隆cont1给cont2
    cont2packet.innerHTML = cont1packet.innerHTML;
    cont3packet.innerHTML = cont1packet.innerHTML;
    function myScrollpacket() {
        if(areapacket.scrollTop >= cont1packet.scrollHeight) {
            areapacket.scrollTop = 0;
        }else {
            areapacket.scrollTop++;
        }
    }

    var timepacket = 50;
    var intervalpacket = setInterval('myScrollpacket()', timepacket);

    areapacket.onmouseover = function () {
        clearInterval(intervalpacket);
    };

    areapacket.onmouseout = function () {
        // 继续执行之前的定时器
        interval = setInterval('myScrollpacket()', timepacket);
    };

</script>


